<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线商城主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
        }

        /* 商品列表样式 */
        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }

        .product {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            width: 200px;
            text-align: center;
        }

        .product img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 5px;
        }

        .product button {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }

        /* 购物车样式 */
        .cart {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin: 20px;
        }

        .cart-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .cart-item img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 5px;
            margin-right: 10px;
        }

        .cart button {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            margin-left: auto;
        }

        /* 订单模块样式 */
        .orders {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin: 20px;
        }

        .order {
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
        }

        /* 支付方式模块样式 */
        .payment-methods {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin: 20px;
        }

        /* 物流模块样式 */
        .shipping-status {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <h1>欢迎来到在线商城</h1>

    <!-- 商品模块 -->
    <div class="product-list">
        <div class="product">
            <img src="111.png" alt="商品图片">
            
            <button onclick="addToCart('商品1', 100)">加入购物车</button>
        </div>
        <div class="product">
            <img src="222.png" alt="商品图片">
            <button onclick="addToCart('商品2', 200)">加入购物车</button>
        </div>
    </div>

    <!-- 购物车模块 -->
    <div class="cart">
        <h2>购物车</h2>
        <div id="cart-items"></div>
        <button onclick="checkout()">结算</button>
    </div>

    <!-- 订单模块 -->
    <div class="orders">
        <h2>我的订单</h2>
        <div id="order-list"></div>
    </div>

    <!-- 支付方式模块 -->
    <div class="payment-methods">
        <h2>支付方式</h2>
        <input type="radio" id="alipay" name="payment" value="alipay">
        <label for="alipay">支付宝</label><br>
        <input type="radio" id="wechatpay" name="payment" value="wechatpay">
        <label for="wechatpay">微信支付</label><br>
    </div>

    <!-- 物流模块 -->
    <div class="shipping-status">
        <h2>物流状态</h2>
        <div id="shipping-status-list"></div>
    </div>

    <script>
        let cart = [];
        let orders = [];

        function addToCart(productName, price) {
            const existingItem = cart.find(item => item.name === productName);
            if (existingItem) {
                existingItem.quantity++;
            } else {
                cart.push({ name: productName, price: price, quantity: 1 });
            }
            updateCart();
        }

        function updateCart() {
            const cartItemsDiv = document.getElementById('cart-items');
            cartItemsDiv.innerHTML = '';
            cart.forEach(item => {
                const cartItemDiv = document.createElement('div');
                cartItemDiv.classList.add('cart-item');
                cartItemDiv.innerHTML = `
                    <img src="111.png" alt="${item.name}">
                    <p>${item.name} x ${item.quantity} - ￥${item.price * item.quantity}</p>
                    <button onclick="removeFromCart('${item.name}')">移除</button>
                `;
                cartItemsDiv.appendChild(cartItemDiv);
            });
        }

        function removeFromCart(productName) {
            cart = cart.filter(item => item.name !== productName);
            updateCart();
        }

        function checkout() {
            if (cart.length === 0) {
                alert('购物车为空，无法结算');
                return;
            }
            const paymentMethod = document.querySelector('input[name="payment"]:checked');
            if (!paymentMethod) {
                alert('请选择支付方式');
                return;
            }
            const order = {
                items: cart,
                paymentMethod: paymentMethod.value,
                status: '待支付',
                shippingStatus: '未发货'
            };
            orders.push(order);
            cart = [];
            updateCart();
            updateOrders();
            alert('订单已生成，请完成支付');
        }

        function updateOrders() {
            const orderListDiv = document.getElementById('order-list');
            orderListDiv.innerHTML = '';
            orders.forEach((order, index) => {
                const orderDiv = document.createElement('div');
                orderDiv.classList.add('order');
                let itemsHtml = '';
                order.items.forEach(item => {
                    itemsHtml += `<p>${item.name} x ${item.quantity} - ￥${item.price * item.quantity}</p>`;
                });
                orderDiv.innerHTML = `
                    <h3>订单 ${index + 1}</h3>
                    ${itemsHtml}
                    <p>支付方式: ${order.paymentMethod}</p>
                    <p>订单状态: ${order.status}</p>
                    <p>物流状态: ${order.shippingStatus}</p>
                `;
                orderListDiv.appendChild(orderDiv);
            });
        }
    </script>
</body>

</html>